<template>
    <div>
<template>
  <el-table :data="tableData"
    border
    show-summary
    style="width: 100%">
    <el-table-column
        type="index"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称">
    </el-table-column>
    <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            <span class="price">{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" align="center">
          <template slot-scope="scope">
            <el-input v-model.number="scope.row.number" oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off" style="width:140px" size="mini"
              @change="handleInput(scope.row)">
              <el-button size="mini" slot="prepend" @click="del(scope.row)"><i class="el-icon-minus"></i></el-button>
              <el-button slot="append" size="mini" @click="add(scope.row)"><i class="el-icon-plus"></i></el-button>
            </el-input>
          </template>
        </el-table-column>
    <el-table-column prop="count" label="小计" align="center">
          <template slot-scope="scope">
            <span class="count">{{scope.row.goodTotal}}</span>
          </template>
        </el-table-column>
    
  </el-table>

  
  </template>

    </div>

</template>

<script>
    export default {
        data() {
      return {
          totalPrice: 0,
      multipleSelection: [],
        tableData: [
        {name:"apple",   price: 3, number: 1, goodTotal: 20, },
        {name:"pear",   price: 4, number: 1, goodTotal: 30, },
        {name:"banana",   price: 5, number: 1, goodTotal: 30, }
      ],
      };
    },
    methods:{
        
        handleInput(value) {
      console.log(value);
      if (null == value.number || value.number == "" || value.number == 0) {
        value.number = 1;
      }
      value.goodTotal = (value.number * value.price)
      //增加商品数量也需要重新计算商品总价
      this.handleSelectionChange(this.multipleSelection);
    },


    add(addGood) {
      //输入框输入值变化时会变为字符串格式返回到js
      //此处要用v-model，实现双向数据绑定
      if (typeof addGood.number == 'string') {
        addGood.number = parseInt(addGood.number);
      };
      addGood.number += 1;
      addGood.goodTotal = (addGood.number * addGood.price)
      this.handleSelectionChange(this.multipleSelection)
    },
    del(delGood) {
      if (typeof delGood.number == 'string') {
        delGood.number = parseInt(delGood.number);
      };
      if (delGood.number > 1) {
        delGood.number -= 1;
        delGood.goodTotal = (delGood.number * delGood.price)
        this.handleSelectionChange(this.multipleSelection)
      }
    },
        
    }
    }
</script>

<style lang="less" scoped>

</style>